<template>
	<view class="flex">
			<view class="comment-face">
				<image :src="commentInfo.userAvatar"></image>
			</view>
			<view class="comment-r pl30">
				<view class="flex space alcenter">
					<view>
						<view class="ft14 text-info">{{commentInfo.userName}}</view>
						<view class="ft14 text-notice mt10">{{commentInfo.date}}</view>
					</view>
					<view class="flex alcenter">
						<unio2o-star-mini></unio2o-star-mini>
						<text class="ml10 ft14 text-theme ftw600">{{commentInfo.rating}}分</text>
					</view>
				</view>
				<view class="mt30 flex alcenter ft14 text-notice">
					<view class="iconfont iconlabel_evaluation"></view>
					<view class="flex alcenter text-over">
						<text class="ml10" v-for="(item,index) in commentInfo.tags" :key="index">{{item}}</text>
					</view>
				</view>
				
				<view class="mt20 ft16 text-main">
					{{commentInfo.content}}
				</view>
				<view class="mt20 flex  wrap">
					<image @click="showPic" v-for="(item,index) in  commentInfo.images" :key="index" :class=" (index + 1) % 3 == 2 ? 'mr20 ml20' : '' " class="mb20 comment-img" :src="item"></image>
				</view>
				
				<view class="mt20" v-for="(item,index) in commentInfo.replies" :key="index">
					<view class="store-reply pd20">
						<view class="ft14 ftw600 text-main">[{{item.userName}}]</view>
						<view class="mt20 ft14 text-info">
							{{item.content}}
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	import  unio2oStarMini from '@/components/base/star/mini.vue';
	export default{
		components:{
			unio2oStarMini
		},
		props: {
			commentInfo:{
				type:Object,
				default: () => {
					return {}
				}
			}
		},
		data(){
			return {
				commentImg:[
					this.$config.staticUrl + 'photo/img01@2x.png',
					this.$config.staticUrl + 'photo/img02@2x.png',
					this.$config.staticUrl + 'photo/img03@2x.png',
					this.$config.staticUrl + 'photo/img04@2x.png',
					this.$config.staticUrl + 'photo/img05@2x.png'
				]
			}
		},
		methods:{
			showPic(){
				uni.previewImage({
					urls: this.commentImg
				});
			}
		}
	}
</script>

<style>
	.store-reply{
		width: 100%;
		border:2rpx solid #E6E6E6;
	}
	.comment-img{
		width: 180rpx;
		height: 180rpx;
	}
	.comment-face{
		width: 76rpx;
		height: 76rpx;
	}
	.comment-face image{
		width: 76rpx;
		height: 76rpx;
	}
	.comment-r{
		width:calc(100% - 76rpx);
	}
</style>
